<template>
  <page-header-wrapper>
    <a-card>
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <!-- <div class="steps-content">
        {{ steps[current].content }}
      </div> -->
      <!-- 第一步 -->
      <firstStep v-if="current == 0" @submit="step1submit" class="steps-content" />
      <!-- 第二步 -->
      <secondStep
        v-if="current == 1"
        @submit="step2submit"
        @cancel="current = 0"
        :selectedRows="selectedRows"
        class="steps-content"
      />
      <!-- 第三步 -->
      <lastStep v-if="current == 2" class="steps-content" :selectedRows="selectedRows" :form="form" />
    </a-card>
  </page-header-wrapper>
</template>
<script>
export default {
  name: 'addFund',
  data() {
    return {
      current: 0,
      steps: [
        {
          title: '选择'
        },
        {
          title: '资金来源'
        },
        {
          title: '等待审批'
        }
      ],
      selectedRows: [],
      form: {}
    }
  },
  components: {
    firstStep: () => import('./firstStep.vue'),
    secondStep: () => import('./secondStep.vue'),
    lastStep: () => import('./lastStep.vue')
  },
  methods: {
    step1submit(v) {
      this.current = 1
      this.selectedRows = v
    },
    step2submit(v) {
      this.form = v
      this.current = 2
    }
  }
}
</script>
<style lang="css" scoped>
.steps-content {
  margin-top: 50px;
}
.steps-action {
  margin-top: 20px;
  text-align: center;
}
</style>
